<template>
  <Panel>
    <template v-slot:header>
      <div>账号列表</div>
    </template>
    <template #con>
      <div class="main">
        <!-- 1.0  按钮 -->
        <el-row>
          <el-col>
            <el-button type="primary">取消选择</el-button>
            <el-button type="danger" @click="delmore">批量删除</el-button>
          </el-col>
        </el-row>

        <!-- 2.0 表格 -->
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="account" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="userGroup" label="用户组" width="120">
          </el-table-column>
          <el-table-column label="日期" width="200">
            <template v-slot="{ row }">{{ row.ctime | getTime }}</template>
          </el-table-column>
          <el-table-column label="操作" show-overflow-tooltip>
            <template v-slot="{ row }">
              <el-button type="" size="mini" @click="edituser(row)"
                >编辑</el-button
              >
              <el-button type="danger" size="mini" @click="delUser(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 模态框 -->
        <div>
          <el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
            <el-form
              :model="editForm"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="用户名" prop="username">
                <el-input
                  type="text"
                  v-model="editForm.username"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <el-form-item label="用户组" prop="selectVal">
                <el-select v-model="editForm.selectVal" placeholder="请选择">
                  <el-option
                    v-for="item in userGroup"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="sureEdit">确 定</el-button>
            </span>
          </el-dialog>
        </div>
        <!--  -->
        <!-- 3.分页 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2, 5, 8, 15]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </template>
  </Panel>
</template>

<script>
import { validateUsername } from "../../utils/validata.js";
import moment from "moment";
import { getUserList, delAccount, editUser, delMore } from "../../api/user";
export default {
  data() {
    var validateSelct = (rlue, value, callback) => {
      if (value === "") {
        callback(new Error("请选择用户组"));
      } else {
        callback();
      }
    };
    return {
      tableData: [],
      multipleSelection: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      ids: [],
      dialogVisible: false,
      editForm: {
        username: "",
        selectVal: "",
      },
      userGroup: [
        { value: "普通管理员", label: "普通管理员" },
        { value: "超级管理员", label: "超级管理员" },
      ],
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        selectVal: [{ validator: validateSelct, trigger: "blur" }],
      },
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    async getlist() {
      const { total, data } = await getUserList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      });
      this.total = total;
      this.tableData = data;
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.ids = [];
      // console.log(val);
      val.forEach((item) => {
        this.ids.push(item.id);
      });
    },
    handleSizeChange(val) {
      this.pageSize = val; //  分页=------
      this.getlist();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getlist();
      console.log(`当前页: ${val}`);
    },

    // 删除数据
    delUser(id) {
      this.$confirm("此操作将永久删除该账号, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = await delAccount({
            id,
          });
          if (data.code === 0) {
            this.$message({
              type: "success",
              message: data.msg,
            });
            this.getlist();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //  批量删除数据
    delmore() {
      console.log(this.ids.length);
      if (this.ids.length === 0) {
        return;
      }
      this.$confirm("此操作将永久删除该账号, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = await delMore({
            ids: JSON.stringify(this.ids),
          });
          if (data.code === 0) {
            this.$message({
              type: "success",
              message: data.msg,
            });
            this.getlist();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 修改账号
    edituser(obj) {
      this.editForm.id = obj.id;
      this.editForm.username = obj.account;
      this.editForm.selectVal = obj.userGroup;
      this.dialogVisible = true;
    },
    async sureEdit() {
      const data = await editUser({
        id: this.editForm.id,
        account: this.editForm.username,
        userGroup: this.editForm.selectVal,
      });
      if (data.code === 0) {
        this.$message({
          message: data.msg,
          type: "success",
        });
        this.dialogVisible = false;
        this.getlist();
      } else {
        this.$message({
          message: data.msg,
          type: "error",
        });
      }
    },
  },
  filters: {
    getTime(val) {
      return moment(val).format("YYYY-MM-DD HH:mm:ss");
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  padding: 20px;
}
</style>